import React from 'react';

// echart
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/pie';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legendScroll';

import './scss/echartarea.scss';


export default class EchartPie extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.pieStyleEchart();
  }

  componentwillreceiveprops(nextProps) {
    this.pieStyleEchart();
  }
  
  pieStyleEchart() {
    let self = this;
    let pieEchart = echarts.init(this.refs.echartTypePie);
    let option = {
      color: self.props.seriesColor||null,
      title: {
        show: self.props.showTitle||'',
        text: self.props.title,
        textStyle: {
          fontSize: 12,
          color: '#fff'
        },
        left: 'center',
        bottom: '5'
      },
      tooltip : {
        trigger: 'item',
        backgroundColor: '#3d83fe',
        padding: [5, 10],
        formatter: `${self.props.showPieName?'{a} <br/>':''}{b}：{c}${self.props.unit}<br/>占比：{d}%`,
        extraCssText: 'box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);'
      },
      legend: {
        show: self.props.showLegend||false,
        itemWidth: 14,
        itemHeight: 14,
        orient: 'horizontal', left: 'center', bottom: '3%',
        selectedMode: false,
        data: self.props.yAxisData||null
      },
      series : [{
        name: self.props.showPieName ? self.props.title : '',
        type: 'pie', radius : '80%', 
        center: ['50%', '45%'],
        label: { normal: { show: self.props.showPieName, position:'inside' } },
        data: self.props.xAxisData,
        itemStyle: {
          emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }
        }
      }]
    };
    pieEchart.setOption(option, true);
  }

  render() {
    return (
      <div className="echart-type-area" ref="echartTypePie">

      </div>
    )
  }
}